<template>
  <div class="BreadCrumbsMain">
    <i class="el-icon-s-home"></i>
    <span>{{ breadCrumbsText }}</span>
  </div>
</template>
<script>
export default {
  props: {
    breadCrumbsArray: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    breadCrumbsText() {
      let breadCrumbsText = ''
      this.breadCrumbsArray.forEach((item) => {
        breadCrumbsText += ' ' + item + ' /'
      })
      breadCrumbsText = breadCrumbsText.slice(0, breadCrumbsText.length - 1)
      return breadCrumbsText
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/globalVariable.scss';
.BreadCrumbsMain {
  height: 50px;
  @include flex(flex-start);
  font-size: 18px;
  color: #fff;
  border-bottom: 1px solid #01caff;
  i {
    margin-right: 10px;
    position: relative;
    top: -2px;
  }
  span {
    font-size: 14px;
  }
}
</style>
